<!-- 交易佣金表 -->
<template>
  <div class="marketCommissionTable">
    <div>
      报表名称
      <el-input class="w200 ml20 mr20" v-model="reportName"></el-input>
      <el-button type="primary" @click="getDealAllotReportList" id="monitorEnter">查询</el-button>
      <el-button type="primary" @click="createReport">生成报表</el-button>
    </div>
    <el-table :data="tcTableData" class="mt20" border style="width: 100%">
      <el-table-column type="index" align="center" label="序号" width="50"></el-table-column>
      <el-table-column prop="name" align="center" label="报表名称" width="300"></el-table-column>
      <el-table-column prop="month" align="center" label="月份"></el-table-column>
      <el-table-column align="center" label="业务人员佣金明细">
        <el-table-column prop="businessAmount" align="center" label="成交佣金发放明细表（元）">
          <template slot-scope="scope">
            <a
              href="javascript:;;"
              @click="goDetail(scope.row.month, 0,scope.row.isSettlement)"
            >{{scope.row.businessAmount}}</a>
          </template>
        </el-table-column>
        <el-table-column prop="adjustAmount" align="center" label="调剂佣金发放明细表（元）">
          <template slot-scope="scope">
            <a
              href="javascript:;;"
              @click="goDetail(scope.row.month, 'group',scope.row.isSettlement)"
            >{{scope.row.adjustAmount}}</a>
          </template>
        </el-table-column>
      </el-table-column>
      <el-table-column align="center" label="总部佣金明细">
        <el-table-column prop="publicAmount" align="center" label="公佣发放明细（元）">
          <template slot-scope="scope">
            <a href="javascript:;;" @click="goDetail(scope.row.month, 2,scope.row.isSettlement)">{{scope.row.publicAmount}}</a>
          </template>
        </el-table-column>
      </el-table-column>
      <el-table-column align="center" label="操作">
        <template slot-scope="scope">
          <el-button @click="reportTable(scope.row)" type="text">导出</el-button>
          <el-button :disabled="scope.row.isSettlement === 1" @click="settlement(scope.row.id,scope.row.month)" type="text">结算</el-button>
        </template>
      </el-table-column>
    </el-table>
    <div class="pagebar">
      <el-pagination
        background
        layout="total, sizes, prev, pager, next, jumper"
        :current-page.sync="tableConfig.pageNum"
        :page-sizes="[10, 20, 30, 40]"
        :page-size="tableConfig.pageSize"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :total="tableConfig.totalSize"
      ></el-pagination>
    </div>
  </div>
</template>

<script type="text/ecmascript-6">
import api from "@/api/apiPath";
import utils from "@/common/utils";

export default {
  name: "transactionCommissionTable",
  title: "交易佣金",
  data() {
    return {
      reportName: "",
      tcTableData: [],
      tableConfig: {
        startTime: "",
        endTime: "",
        pageNum: 1,
        pageSize: 10,
        totalSize: 10
      }
    };
  },
  created() {
    this.getDealAllotReportList();
  },
  activated() {
    this.getDealAllotReportList();
  },
  mounted() {},
  methods: {
    goDetail(month, type,settlement) {
      if (type === "group") {
        this.$router.push({
          path: "./transactionCommissionGroupTable",
          query: { month ,settlement }
        });
      } else {
        this.$router.push({
          path: "./transactionCommissionStaffTable",
          query: { month, index: type ,settlement }
        });
      }
    },
    reportTable(row) {
      if(row.businessAmount == 0 && row.adjustAmount == 0 && row.publicAmount == 0) {
        return this.$message.error('暂无可导出的数据！')
      }
      this.$axios
        .service({
          method: "get",
          url:"/commallocation/batch/export/dealBatchExport?reportType=1&month=" + row.month,
          responseType: "blob"
        })
        .then(res => {
          this.downloadFile(res.data);
        })
        .catch(res => {
          // 返回的是流文件 全局的 响应拦截 方法不适用 需要在 catch 中拿数据
          this.downloadFile(res.data);
        });
    },
    downloadFile(data) {
      if (!data) {
        this.$message({
          message: "导出失败",
          type: "error"
        });
        return;
      }
      let url = window.URL.createObjectURL(new Blob([data]));
      let link = document.createElement("a");
      let fileName = `导出${utils.getTimeString(new Date())}.zip`;
      link.style.display = "none";
      link.href = url;
      link.setAttribute("download", fileName);
      document.body.appendChild(link);
      link.click();
      URL.revokeObjectURL(link.href);
      document.body.removeChild(link);
      this.$message({
        message: "导出成功",
        type: "success"
      });
    },
    settlement(id,month) {
      this.$confirm("是否结算，结算后不可更改报表，是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          this.$axios
            .post("/commallocation/dealAllot/report/settlement", { id,month })
            .then(res => {
              this.$message({
                type: "success",
                message: "操作成功!"
              });
              this.getDealAllotReportList();
            });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消"
          });
        });
    },
    createReport() {
      this.$router.push({ path: "./transactionCommissionTableReport" });
    },
    getDealAllotReportList() {
      this.axios
        .post(api.getDealAllotReportList, {
          reportName: this.reportName,
          pageNum: 1,
          pageSize: 10
        })
        .then(res => {
          this.tcTableData = res.data.data.list;
          this.tableConfig.totalSize = res.data.data.total;
        });
    },
    handleSizeChange(size) {
      this.tableConfig.pageSize = size;
      this.getSettleListByPage();
    },
    handleCurrentChange(page) {
      this.tableConfig.pageNum = page;
      this.getSettleListByPage();
    }
  },
  components: {},
  computed: {}
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="stylus"></style>
